<template>
  <border
    class="stock-distribution"
    :class="{'flat-border': $store.state.themeConfig.moduleTheme == 'flat'}"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-map">
        <map-vue :organId="organId"
                 ref="map"
                 :isUse2D = "mapConfig.isUse2D"
                 :isMapMenu = "mapConfig.isMapMenu"
                 :isCallback = "mapConfig.isCallback"
                 :isPropsData="mapConfig.isPropsData"
                 :mapData="mapConfig.mapData"
                 :isNeedMapBackground="mapConfig.isNeedMapBackground"
                 @showTips="showTips"></map-vue>
      </div>
      <div class="module-pie">
        <div class="pie-part">
          <div class="part-title">
            <span class="title-span"></span>
            <span class="pie-left">存量建筑资产</span>
            <span class="pie-right">存量土地资产</span>
          </div>
          <div class="part-pie">
            <div class="pie-top">
              <div class="pie-title">
                <img class="pie-title-img" src="../../assets/images/module/pie-title.png"/>
                <p class="pie-title-message">建筑资产</p>
              </div>
              <div class="pie-item">
                <pie ref="pie"
                     :isUseValue="pieConfig.isUseValue"
                     :value="pieConfig.pieData[0]"
                     :pieLegend="pieConfig.legend[0]"
                     :limitLength="pieConfig.limitLength"
                     :pieType="pieType"
                     :notOther="pieConfig.notOther"
                     :seriesRadius="seriesRadius"
                     :labelShow="pieConfig.labelShow"
                     :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
                <span class="pie-message">体量（{{pieConfig.pieMessage[0]}}{{pieConfig.pieUnit[0]}}）</span>
              </div>
              <div class="pie-item">
                <pie ref="pie1"
                     :isUseValue="pieConfig.isUseValue"
                     :value="pieConfig.pieData[2]"
                     :pieLegend="pieConfig.legend[2]"
                     :limitLength="pieConfig.limitLength"
                     :pieType="pieType"
                     :notOther="pieConfig.notOther"
                     :labelShow="pieConfig.labelShow"
                     :seriesRadius="seriesRadius"
                     :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
                <span class="pie-message">原值（{{pieConfig.pieMessage[2]}}{{pieConfig.pieUnit[2]}}）</span>
              </div>
              <div class="pie-item">
                <pie ref="pie2"
                     :isUseValue="pieConfig.isUseValue"
                     :value="pieConfig.pieData[4]"
                     :pieLegend="pieConfig.legend[4]"
                     :limitLength="pieConfig.limitLength"
                     :pieType="pieType"
                     :notOther="pieConfig.notOther"
                     :labelShow="pieConfig.labelShow"
                     :seriesRadius="seriesRadius"
                     :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
                <span class="pie-message">市值（{{pieConfig.pieMessage[4]}}{{pieConfig.pieUnit[4]}}）</span>
              </div>
            </div>
            <div class="pie-bottom">
              <div class="pie-title">
                <img class="pie-title-img" src="../../assets/images/module/pie-title.png"/>
                <p class="pie-title-message">土地资产</p>
              </div>
              <div class="pie-item">
                <pie ref="pie3"
                     :isUseValue="pieConfig.isUseValue"
                     :value="pieConfig.pieData[1]"
                     :pieLegend="pieConfig.legend[1]"
                     :limitLength="pieConfig.limitLength"
                     :pieType="pieType"
                     :notOther="pieConfig.notOther"
                     :labelShow="pieConfig.labelShow"
                     :seriesRadius="seriesRadius"
                     :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
                <span class="pie-message">体量（{{pieConfig.pieMessage[1]}}{{pieConfig.pieUnit[1]}}）</span>
              </div>
              <div class="pie-item">
                <pie ref="pie4"
                     :isUseValue="pieConfig.isUseValue"
                     :value="pieConfig.pieData[3]"
                     :pieLegend="pieConfig.legend[3]"
                     :limitLength="pieConfig.limitLength"
                     :pieType="pieType"
                     :notOther="pieConfig.notOther"
                     :labelShow="pieConfig.labelShow"
                     :seriesRadius="seriesRadius"
                     :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
                <span class="pie-message">原值（{{pieConfig.pieMessage[3]}}{{pieConfig.pieUnit[3]}}）</span>
              </div>
              <div class="pie-item">
                <pie ref="pie5"
                     :isUseValue="pieConfig.isUseValue"
                     :value="pieConfig.pieData[5]"
                     :pieLegend="pieConfig.legend[5]"
                     :limitLength="pieConfig.limitLength"
                     :pieType="pieType"
                     :notOther="pieConfig.notOther"
                     :labelShow="pieConfig.labelShow"
                     :seriesRadius="seriesRadius"
                     :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
                <span class="pie-message">市值（{{pieConfig.pieMessage[5]}}{{pieConfig.pieUnit[5]}}）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import MapVue from './../components/MapVue.vue'
import Pie from './../components/Pie.vue'
export default {
  name: 'stockAssets',
  components: {
    Border,
    MapVue,
    Pie
  },
  data () {
    return {
      borderConfig: {
        moduleType: '3x2',
        icon: '',
        titleText: '存量资产概况',
        goPageUrl: ''
      },
      mapConfig: {
        isMapMenu: false,
        isUse2D: true,
        isPropsData: true,
        isCallback: false,
        isNeedMapBackground: true,
        mapData: []
      },
      pieConfig: {
        pieColor: ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022', '#8c70f8', '#cadfea', '#f59233'],
        legend: [[], [], [], [], [], []],
        pieData: [[], [], [], [], [], []],
        limitLength: 5,
        notOther: 'notOther',
        isUseValue: true,
        labelShow: false,
        isUseComputedLine: true,
        pieMessage: [0, 0, 0, 0, 0, 0],
        pieUnit: ['㎡', '亩', '万元', '万元', '万元', '万元']
      },
      apiData: ''
    }
  },
  computed: {
    pieType () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? '' : 'default'
    },
    seriesRadius () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']] : [['40%', '70%']]
    },
    organId () {
      return this.$store.state.organId
    }
  },
  methods: {
    showTips (data) {
      this.$parent.showTips(data)
    },
    // 获取数据
    getData (type) {
      if (type === 'init') {
        this.stockAssetsApi.getStockAssetsSituationList({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
            this.handleData()
            this.mapConfig.mapData = res.data.data.provinceList
          } else {
            this.apiData = {}
            this.showTips('请求失败，点击确认继续刷新')
          }
        }, res => {
          this.apiData = {}
          this.showTips('请求失败，点击确认继续刷新')
        })
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let legend1 = []
      let legend2 = []
      let legend3 = []
      let legend4 = []
      let legend5 = []
      let legend6 = []
      let pieData1 = []
      let pieData2 = []
      let pieData3 = []
      let pieData4 = []
      let pieData5 = []
      let pieData6 = []
      if (JSON.stringify(data) !== '{}') {
        data.assetUsageStatusInf.assetUsageStatusList.forEach((item, index) => {
          legend1.push(data.assetUsageStatusInf.buildAssetVolumeList[index].assetUsageStatusName)
          legend2.push(data.assetUsageStatusInf.landAssetVolumeList[index].assetUsageStatusName)
          legend3.push(data.assetUsageStatusInf.buildAssetInitialValueList[index].assetUsageStatusName)
          legend4.push(data.assetUsageStatusInf.landAssetInitialValueList[index].assetUsageStatusName)
          legend5.push(data.assetUsageStatusInf.buildAssetMarketValueList[index].assetUsageStatusName)
          legend6.push(data.assetUsageStatusInf.landAssetMarketValueList[index].assetUsageStatusName)
          pieData1.push(parseInt(data.assetUsageStatusInf.buildAssetVolumeList[index].assetVolume))
          pieData2.push(parseInt(data.assetUsageStatusInf.landAssetVolumeList[index].assetVolume))
          pieData3.push(parseInt(data.assetUsageStatusInf.buildAssetInitialValueList[index].assetInitialValue))
          pieData4.push(parseInt(data.assetUsageStatusInf.landAssetInitialValueList[index].assetInitialValue))
          pieData5.push(parseInt(data.assetUsageStatusInf.buildAssetMarketValueList[index].assetMarketValue))
          pieData6.push(parseInt(data.assetUsageStatusInf.landAssetMarketValueList[index].assetMarketValue))
        })
      }
      this.pieConfig.legend = [legend1, legend2, legend3, legend4, legend5, legend6]
      // this.pieConfig.pieData1 = pieData1
      // this.pieConfig.pieData2 = pieData2
      // this.pieConfig.pieData3 = pieData3
      // this.pieConfig.pieData4 = pieData4
      // this.pieConfig.pieData5 = pieData5
      // this.pieConfig.pieData6 = pieData6
      this.pieConfig.pieData = [pieData1, pieData2, pieData3, pieData4, pieData5, pieData6]
      this.pieConfig.pieMessage = JSON.stringify(data) === '{}' ? [0, 0, 0, 0, 0, 0] : [
        parseInt(data.assetUsageStatusInf.buildAssetVolume ? data.assetUsageStatusInf.buildAssetVolume : 0),
        parseInt(data.assetUsageStatusInf.landAssetVolume ? data.assetUsageStatusInf.landAssetVolume : 0),
        parseInt(data.assetUsageStatusInf.buildAssetInitialValue / 10000),
        parseInt(data.assetUsageStatusInf.landAssetInitialValue / 10000),
        parseInt(data.assetUsageStatusInf.buildAssetMarketValue / 10000),
        parseInt(data.assetUsageStatusInf.landAssetMarketValue / 10000)
      ]
      this.pieConfig.pieUnit = JSON.stringify(data) === '{}' ? ['㎡', '亩', '万元', '万元', '万元', '万元'] : [data.assetUsageStatusInf.buildAssetVolumeUnit ? data.assetUsageStatusInf.buildAssetVolumeUnit : '',
        data.assetUsageStatusInf.landAssetVolumeUnit ? data.assetUsageStatusInf.landAssetVolumeUnit : '', '万元', '万元', '万元', '万元']
    },
    resizeChart () {
      this.$refs.pie.resizeChart()
      this.$refs.pie1.resizeChart()
      this.$refs.pie2.resizeChart()
      this.$refs.pie3.resizeChart()
      this.$refs.pie4.resizeChart()
      this.$refs.pie5.resizeChart()
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
.stock-distribution {
  .module-content {
    width: 100%;
    height: 100%;
    position: relative;
    // top: 20px;
    .module-map {
      width: 50%;
      height: calc(100% - 20px);
      float: left;
      box-sizing: border-box;
      margin: 20px 0 0;
      padding: 5px 5px 0;
    }
    .module-pie {
      width: calc(50% - 50px);
      padding: 0 25px;
      height: calc(98.88% - 40px);
      margin: 20px 0 0;
      float: left;
      .part-pie {
        width: 100%;
        height: 100%;
        .pie-top, .pie-bottom {
          width: 100%;
          height: 50%;
          position: relative;
          .pie-item{
            width: calc(100% / 3);
            height: 85%;
            float: left;
            position: relative;
            .pie {
              width: 100%;
              height: calc(100% - 18px);
              position: relative;
            }
            .pie-message {
              display: block;
              position: absolute;
              bottom: 10px;
              left: 0;
              width: 100%;
              height: 18px;
              line-height: 18px;
              font-size: 14px;
              color: #A1CFFF;
            }
          }
        }
        .pie-title{
          width: 15%!important;
          padding: 0 2%;
          position: relative!important;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          .pie-title-img{
            width: 100%;
          }
          .pie-title-message{
            width: 100%;
            font-size: 12px;
            color: #b5cff4;
            text-align: center;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 1.5%;
            top: 0;
          }
        }
      }
      .pie-part {
        width: 100%;
        height: 100%;
        // border: 1px solid #2462FF;
        font-size: 16px;
        color: #fff;
        box-sizing: border-box;
        span {
          display: flex;
          float: left;
          text-align: center;
          height: 100%;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          flex-wrap: wrap;
          &.title-span {
            width: 50px;
            display: none;
          }
          &.pie-left {
            width: calc(100% / 2);
            box-sizing: border-box;
            // border-left: 1px solid #2462FF;
            position: relative;
          }
          &.pie-right {
            width: calc(100%  / 2);
            position: relative;
          }
          .pie {
            width: 100%;
            height: calc(100% - 18px);
          }
          .pie-message {
            display: block;
            width: 100%;
            height: 18px;
            line-height: 18px;
            font-size: 14px;
            color: #A1CFFF;
          }
        }
        .part-title {
          width: 100%;
          height: 50px;
          display: none;
          // border-bottom: 1px solid #2462ff;
          box-sizing: border-box;
          span {
            &.pie-left {
              // border-left: 1px solid #2462FF;
              // border-right: 1px solid #2462FF;
            }
          }
        }
        .pie-title{
          width: 30%;
          padding: 0 2%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          .pie-title-img{
            width: 100%;
          }
          .pie-title-message{
            width: 100%;
            font-size: 12px;
            color: #b5cff4;
            text-align: center;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 1.5%;
            top: 0;
          }
        }
        .part-total, .part-original-value, .part-market-value {
          width: 100%;
          height: calc(100% / 3);
          // border-bottom: 1px solid #2462ff;
          box-sizing: border-box;
        }
        .part-market-value {
          border-bottom: 0;
        }
      }
      .pie-legend {
        width: calc(100% - 50px);
        height: 15%;
        text-align: center;
        padding-top: 5px;
        box-sizing: border-box;
        margin-left: 50px;
        display: none;
        .legend {
          display: inline-block;
          margin: 0 25px 0 0;
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          color: #A4B3C7;
        }
        .legend-li {
          height: 100%;
          &:last-of-type {
            margin: 0;
          }
          i {
            display: block;
            float: left;
            width: 12px;
            height: 12px;
            vertical-align: top;
            margin: 9px 5px 0 0;
          }
          span {
            display: inline-block;
          }
        }
      }
    }
  }
  &.flat-border {
    .stock-distribution {
      .module-content {
        .module-pie {
          height: calc(95.88% - 40px);
        }
      }
    }
  }
}

@media screen and (min-width: 1890px) {
  .stock-distribution {
    .module-pie {
      .pie-part {
        font-size: 20px;
      }
    }
  }
}
</style>
